<template>
  <view-box ref="viewBox" body-padding-bottom="5px">
    <search-bar></search-bar>
    <swiper auto loop :aspect-ratio="1/2" :list="list" v-if="list.length > 0"></swiper>
    <box gap="10px">
      <h4 class="title" @click="getRequiredCourses()">经典必看（猜你喜欢）<span>换一批</span></h4>
      <div class="flex-box vux-1px-b">
        <div @click="$router.push('/courses/' + item.id)" v-if="requiredCourses" v-for="(item, index) in requiredCourses" :key="index">
           <img :src="$apiUrl + '/storage/' + item.thumb">
           <p>{{item.name}}</p>
        </div>
      </div>
      <h4 class="title" @click="$router.push('/teachers?category_id=' + category)">名师荟萃<span>更多</span></h4>
      <vue-seamless-scroll :data="teachers" class="seamless-warp" :class-option="classOption">
        <ul class="item" :style="{ width: teachers.length * 110 + 'px' }">
          <li v-for="item in teachers" @click="$router.push('/teachers/' + item.id)">
            <img :src="item.avatar" v-if="item.avatar && item.avatar.indexOf('http:') !== -1">
            <img :src="$apiUrl + '/storage/' + item.avatar" v-else>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </vue-seamless-scroll>
    </box>
    <box gap="10px">
      <div v-if="courses && courses.best.length > 0">
        <h4 class="title">精品课程推荐<span @click="$router.push('/courses/list?category=' + category + '&type=best')">更多课程...</span></h4>
        <course v-for="(item, index) in courses.best" :key="index" :product="item"></course>
      </div>
      <div v-if="courses && courses.free.length > 0">
        <h4 class="title">免费课程<span @click="$router.push('/courses/list?category=' + category + '&type=free')">更多课程...</span></h4>
        <course v-for="(item, index) in courses.free" :key="index" :product="item"></course>
      </div>
      <div v-if="courses && courses.all.length > 0">
        <h4 class="title">全部课程<span @click="$router.push('/courses/list?category=' + category + '&type=all')">更多课程...</span></h4>
        <course v-for="(item, index) in courses.all" :key="index" :product="item"></course>
      </div>
    </box>
  </view-box>
</template>
<script>
  import { ViewBox, Swiper, Box } from 'vux'
  import Course from '../components/Course'
  import vueSeamlessScroll from 'vue-seamless-scroll'
  import SearchBar from '../components/SearchBar'
  export default {
    components: {
      ViewBox,
      Swiper,
      Box,
      Course,
      vueSeamlessScroll,
      SearchBar
    },
    computed: {
      classOption () {
        return {
          direction: 2,
          limitMoveNum: 4,
          step: 0.3
        }
      },
      list () {
        let data = []
        this.ads.forEach((item) => {
          data.push({
            img: this.$apiUrl + '/storage/' + item.body,
            url: item.url,
            title: item.title
          })
        })
        return data
      }
    },
    data () {
      return {
        category: 0,
        teachers: [],
        requiredCourses: null,
        courses: null,
        ads: []
      }
    },
    mounted () {
      this.category = this.$route.query.category
      this._getTeachers()
      this._getGroupCourses()
      this._getAds()
      this.getRequiredCourses()
    },
    methods: {
      _getTeachers () {
        this.$http.get('/users?role=Teacher&category_id=' + this.category + '&page_size=20').then((response) => {
          this.teachers = response.data.data
        })
      },
      _getAds () {
        this.$http.get('/ads?position=' + this.category + '&page_size=5&order_by=order&order_type=asc').then((response) => {
          this.ads = response.data.data
        })
      },
      getRequiredCourses () {
        this.$vux.loading.show()
        this.$http.get('/courses?category_id=' + this.category + '&page_size=6&is_on_sale=1&is_required=1&random=1').then((response) => {
          this.$vux.loading.hide()
          this.requiredCourses = response.data.data
        }).catch((error) => {
          this.$vux.loading.hide()
          console.log(error)
        })
      },
      _getGroupCourses () {
        this.$http.get('/courses/group?category_id=' + this.category).then((response) => {
          this.courses = response.data
        }).catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .title {
    font-weight: 500;
    color: #000;
    padding-bottom: 5px;
    margin-top: 15px;
    span {
      float: right;
      color: #999;
      font-size: 14px;
      font-weight: normal;
    }
  }
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    div {
      width: 32%;
      margin-bottom: 10px;
      padding-right: 2%;
      &:nth-child(3) {
        padding-right: 0;
      }
    }
    img {
      width: 100%;
    }
    p {
      font-size: 14px;
      color: #666;
      height: 46px;
      overflow: hidden;
    }
  }
  .seamless-warp {
    overflow: hidden;
    height: 130px;
    width: 100%;
    ul.item {
      list-style-type: none;
      width: 330px;
      li {
        float: left;
        margin-right: 10px;
        p {
          text-align: center;
          max-width: 100px;
          overflow: hidden;
        }
      }
    }
    img {
      width: 100px;
    }
  }
</style>